<template>
  <div class="mainBox">
    <Calendar
      :textTop="['天','一','二','三','四','五','六']"
      v-on:choseDay="clickDay"
      :markDateMore="selectDate"
      :sundayStart='true'>
    </Calendar>
  </div>
</template>

<script>

    import Calendar from "vue-calendar-component";

    export default {
        name:"MyCalendarDate",
        props:{
            selectDate:{
                type: Array,
                default: () => []
            },
        },
        components:{
            Calendar
        },
        data() {
            return {
                // selectDate: [],//选中的日期
            };
        },
        created() {
            // this.getWorking();
        },
        methods: {
            // getWorking() {//获取当前月工作日
            //     let myDate = new Date();
            //     let tY = myDate.getFullYear();//得到当前年
            //     let tM = myDate.getMonth();//得到当前月+1
            //     let tD = new Date(tY, tM + 1, 0);
            //     let tT = tD.getDate();//得到当前月的天数
            //
            //     for (var i = 1; i <= tT; i++) {
            //         let week = new Date(tY, tM, i).getDay()
            //         if (week >= 1 && week <= 5) {
            //             let dd = tY + "/" + (tM + 1) + "/" + i;
            //             let temp = {className: "mark1", date: dd}
            //             this.selectDate.push(temp)
            //         }
            //     }
            //     console.log(JSON.stringify(this.selectDate))
            // },
            clickDay(today) {//选中日期
                this.$emit('chose',today);
            }
        }
    }

</script>

<style lang="scss">

  .mark1 {
    color: white !important;
    background: #1890ff !important;
    border-radius: 50%;
  }

  .mainBox {
    .wh_content_all { /*主体*/
      background-color: #ffffff;
      border: 1px silver solid;
      border-radius: 5px;

      .wh_jiantou1 { /*左箭头*/
        border-top: 2px solid #000000;
        border-left: 2px solid #000000;
      }

      .wh_jiantou2 { /*右箭头*/
        border-top: 2px solid #000000;
        border-right: 2px solid #000000;
      }

      .wh_top_changge li { /*当前年月标题*/
        color: black;
      }

      .wh_content_item {
        margin-top: 5px;

        .wh_top_tag { /*星期标题*/
          color: #000000;
        }

        .wh_item_date { /*当前月*/
          color: #000000;
        }

        .wh_item_date:hover { //悬浮
          color: #1890ff;
          background: #ffffff;
          border-radius: 50%;
        }

        .wh_other_dayhide { /*上月和下月时间*/
          color: #bfbfbf;
        }

        .wh_chose_day { //选中
          background: #ffffff;
          color: #000000;
        }

        .wh_isToday { /*当前天*/
          /*background: #33ad53;*/
          background: #ff4d4d;
          color: #ffffff;
        }
      }

    }
  }

</style>